<!--
 * @Description  : 首页
 * @Author       : YiDing Xue
 * @Date         : 2023-02-23
 * @LastEditors  : YiDing Xue
 * @LastEditTime : 2023-03-10
-->
<template>
  <AppPage :left-icon="{ icon: 'game-icons:white-book', size: 32, path: 'home', color: 'black' }">
    <template #center>
      <router-link to="search">
        <nut-searchbar class="input" w-220 input-background="#e8e8e8" placeholder="请输入想要搜索的内容" background="none" readonly shape="round" />
      </router-link>
    </template>
    <article pb-30>
      <nut-image width="92vw" :src="homeImage" @click="indexInitialize" />
      <nut-grid :column-num="worksTypeList.length" :border="false">
        <nut-grid-item v-for="(grid, index) in worksTypeList" :key="index" mt-20 color-black :text="grid.typeName" :to="{ name: 'worksCategory', query: { type: grid.type } }">
          <TheIcon :icon="grid.icon || 'game-icons:open-book'" :size="32" />
        </nut-grid-item>
      </nut-grid>

      <section v-for="(section, index) in worksModule" :key="index" my-20>
        <div h-2 bg-yellow />
        <div mt-12 flex justify-between>
          <h3 class="text-24 fw-400 color-black">{{ section.moduleName }}</h3>
          <router-link :to="{ name: 'worksCategory', query: { moduleId: section.moduleId } }">
            <TheIcon icon="ic:baseline-arrow-forward" :size="24" color="#fcd006" />
          </router-link>
        </div>

        <div flex justify-between mt-25>
          <div relative>
            <h4 class="color-black">{{ section.worksName }}</h4>
            <div mt-3 flex items-baseline>
              <div m-r-8 bg-yellow w-6 h-6 b-rounded-50 />
              <p text-13 font-400 color-black>{{ section.author }}</p>
            </div>
            <p class="text-ellipsis--l5 mr-16 mt-20 text-13 color-black">{{ section.intro }}</p>
            <div absolute w-42vw flex justify-between bottom-0>
              <router-link :to="{ name: 'worksDetail', query: { worksName: section.worksName, moduleWorksId: section.moduleWorksId } }">
                <nut-tag round color="#fcd006">
                  <div text-black text-10 p-2>免费试听</div>
                  <TheIcon icon="material-symbols:add-circle" />
                </nut-tag>
              </router-link>
            </div>
          </div>
          <router-link :to="{ name: 'worksDetail', query: { worksName: section.worksName, moduleWorksId: section.moduleWorksId } }">
            <nut-image width="45vw" height="223" :src="section.imgUrl" />
          </router-link>
        </div>

        <nut-grid :border="false" :column-num="4" mt-20>
          <nut-grid-item v-for="(grid, index2) in section.books" :key="index2">
            <router-link :to="{ name: 'worksDetail', query: { worksName: grid.worksName, moduleWorksId: grid.moduleWorksId } }">
              <nut-image width="18vw" :src="grid.imgUrl" />
            </router-link>

            <p class="w-60 text-12 text-center mt-10 text-ellipsis--l1">{{ grid.worksName }}</p>
          </nut-grid-item>
        </nut-grid>
      </section>

      <section>
        <div h-2 bg-yellow />
        <div mt-15 flex justify-between>
          <h3>最新专题</h3>
          <router-link to="works-topic">
            <TheIcon icon="ic:baseline-arrow-forward" :size="24" color="#fcd006" />
          </router-link>
        </div>
        <section class="topic" overflow-x-scroll>
          <div flex>
            <div v-for="item in worksTopic" :key="item.moduleWorksId" relative mr-20 mt-10>
              <div>
                <router-link :to="{ name: 'topicDetail', query: { moduleId: item.moduleId } }">
                  <nut-image width="63vw" height="200" :src="item.imgUrl" />
                </router-link>
                <div class="text-ellipsis--l1 opacity-95 absolute w-63vw h-50 lh-50 bg-[#fcd006] bottom-0 text-white text-center text-20 fw-900">{{ item.moduleName }}</div>
              </div>
              <div class="p-20 text-14 color-[#888] h-90 bg-[#f4f4f4]">{{ item.intro }}</div>
            </div>
          </div>
        </section>
      </section>
    </article>
  </AppPage>
</template>

<script setup>
import { module, topic } from '@/api/index'
import { worksType } from '@/api/works'
const worksTypeList = ref([])
const worksModule = ref([])
const worksTopic = ref([])
const homeImage = 'https://hshs-app.oss-cn-hangzhou.aliyuncs.com/upload/prod/website/20221118/369698582982656/4fb1ece1-fde4-40e5-844d-f395ad04976e.jpg' + '?' + Math.random()

/** 首页数据初始化 */
const indexInitialize = () => {
  getWorksType()
  getModule()
  getTopic()
}

onMounted(() => {
  getWorksType()
  getModule()
  getTopic()
})

/** 作品种类列表(有声书-电子书-纸质书) */
const getWorksType = async () => {
  const result = await worksType()
  worksTypeList.value = result.data
}

/** 获取作品类型列表 */
const getModule = async () => {
  const result = await module()
  worksModule.value = result.data
}

/** 获取作品专题 */
const getTopic = async () => {
  const result = await topic()
  worksTopic.value = result.data
}
</script>
<style>
:root {
  --nut-grid-item-text-color: black;
  --nut-grid-item-text-font-size: 14px;
}
.input {
  width: 220px;
}
</style>
